<!-- k线频率 -->

<script setup lang="ts">
// import { CirclePlusFilled } from "@element-plus/icons-vue";
import { reactive } from "vue";

const props = withDefaults(defineProps<{
  showNum: number
}>(), {
  showNum: 4
});

const times: Array<{
  name: string,
  value: number
}> = [{
  name: "分时",
  value: 0
}, {
  name: "日线",
  value: 1
}, {
  name: "周线",
  value: 7
}, {
  name: "月线",
  value: 30
}, {
  name: "1分钟",
  value: 1
}, {
  name: "5分钟",
  value: 5
}, {
  name: "15分钟",
  value: 15
}, {
  name: "30分钟",
  value: 30
}, {
  name: "60分钟",
  value: 60
}];

const showTimes = times.splice(0, props.showNum);

const emit = defineEmits<{
  (e: "select", name: string, fre: number): void
}>();

const data = reactive<{
  curIndex: number,
}>({
  curIndex: 0,
});

const onSelected = (index: number, name: string, value: number) => {
  data.curIndex = index;
  emit("select", name, value);
  // onSelectedDrop(name, value);
};


// const onSelectedDrop = (name: string, value: number) => {
//   data.curIndex = -1;
//   emit("select", name, value);
// };




</script>

<template>
  <div class="kdata-fre-bar horzontal-center-layout">
    <div class="horzontal-center-layout">

      <div v-for="(item, index) in showTimes" class="time" :class="{ 'time-selected': data.curIndex === index }"
        :key="index" @click="onSelected(index, item.name, item.value)">{{ item.name }}</div>

      <el-popover trigger="hover" placement="bottom" :width="50" popper-class="kdata-fre-time">
        <template #reference>
          <div class="more">更多>></div>
        </template>
        <template #default>
          <div v-for="(item, index) in times" class="time" :key="index"
            :class="{ 'time-selected': data.curIndex === index + showTimes.length }"
            @click="onSelected(index + showTimes.length, item.name, item.value)">
            {{ item.name }}</div>
        </template>
      </el-popover>



    </div>


  </div>
</template>

<style scoped lang="scss">
.kdata-fre-bar {
  width: 100%;
  height: 48px;
  font-size: 12px;
  border-bottom: 1px solid #efefef;
  padding: 0 15px 0 10px;
  background-color: #fff;

  .time,
  .more {
    cursor: pointer;
    margin: 0 2px;
    padding: 2px 8px;


  }

  .time {
    &:hover {
      background-color: #2F49D0;
      color: #fff;
      border-radius: 5px;
    }
  }

  .time-selected {
    background-color: #2F49D0;
    color: #fff;
    border-radius: 5px;
  }

  .self-selected {
    cursor: pointer;

    i {
      --color: #515a6e;
    }

    span {
      margin-left: 4px;
    }

    &:hover {
      i {
        --color: #2F49D0;
      }

      span {
        color: #2F49D0;
      }
    }
  }

}
</style>

<style lang="scss">
.kdata-fre-time {
  background: red;
  min-width: 90px !important;
  padding: 2px 1px 2px 1px !important;

  .time {
    font-size: 12px;

    cursor: pointer;
    margin: 2px;
    padding: 2px 8px;

    &:hover {
      background-color: #2F49D0;
      color: #fff;
    }
  }

  .time-selected {
    background-color: #2F49D0;
    color: #fff;

  }


}
</style>